<template>
	<view>
		<view class="scroll" :style="[AppSkinVar]">
			<scroll-view scroll-y @scrolltolower="getData" lower-threshold="60">
				<block v-for="(item, index) in replyList" :key="index">
					<view v-if="showDateTime[index]" class="e-p-t-22 e-p-b-40 text-center e-font-24 f-b2">
						{{item.createTime}}
					</view>
					<view class="content-wrapper e-flex e-rela e-flex" :class="{'e-flex-end': item.isSys != 1}">
						<image :class="['posi-' + item.isSys]" class="img-80 e-abso" :src="$fullLink(item.coverImg)"  mode="aspectFill"></image>
						<view class="e-m-t-30" :class="['sys-box-' + item.isSys]">
							{{item.content}}
						</view>
					</view>
					
				</block>
			</scroll-view>
		</view>
		<view class="footer bg-white e-flex">
			<image class="img-48" src="/pages/public/static/msg/source.png" mode=""></image>
			<e-input class="e-m-l-12 e-m-r-24 p0" :value="content" border="bottom" @confirm="submit"></e-input>
			<image class="img-48 e-m-r-28" src="/pages/public/static/msg/smile.png" mode=""></image>
			<image class="img-48" src="/pages/public/static/msg/add.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDateTime: [],
				replyList:[],
				content: ''
			};
		},
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title: opt.title
			})
			this.getData()
		},
		methods: {
			getData() {
				const data = [{
						isSys: 1, // 1 系统回复 2客户回复
						coverImg: '/statics/2021/10/14/dcc2926b-9dea-41c4-b451-1905145afd60.jpg',
						createTime: '2020-11-12 18:38:21',
						content: '你好，请问有什么可以帮助您？'
					},
					{
						isSys: 2, // 1 系统回复 2客户回复
						coverImg: '/statics/2021/10/14/dcc2926b-9dea-41c4-b451-1905145afd60.jpg',
						createTime: '2020-11-12 18:42:21',
						content: '你好，我前两天下的单，怎么还没有发货呢？'
					},
					{
						isSys: 1, // 1 系统回复 2客户回复
						coverImg: '/statics/2021/10/14/dcc2926b-9dea-41c4-b451-1905145afd60.jpg',
						createTime: '2020-11-12 18:44:21',
						content: '请稍等，马上为您查询一下。'
					},
				]
				if (this.replyList.length) {
					this.replyList.push(...data)
				} else {
					this.replyList = data
				}
				this.showDateTime = this.replyList.map((item, index) => {
					if (index === 0) return true
					const thisDate = new Date(item.createTime)
					const beforeDate = new Date(this.replyList[index - 1].createTime)
					return thisDate.getTime() - beforeDate.getTime() >= 240000
				})	
			},
			submit(val) {
				console.log(val, 'val')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll{
		height: calc(100vh - 100rpx);
		padding: 0 30rpx;
		scroll-view {
			height: 100%;
		}
		.f-b2 {
			color: #B2B2B2;
		}
		.content-wrapper {
			width: calc(100vw - 60rpx) !important;
			position: relative;
			margin-bottom: 40rpx;
			.img-80 {
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 50%;
			}
		}
		.posi-1 {
			top: 0;
			left: 0;
		}
		.posi-2 {
			top: 0;
			right: 0;
		}
		.sys-box-1 {
			margin-left: 106rpx;
			margin-right: 130rpx;
			padding: 22rpx;
			font-size: 30rpx;
			color: #313131;
			line-height: 42rpx;
			background: #FFFFFF;
			border-radius: 0px 16rpx 16rpx 16rpx;
			border: 1px solid rgba(91, 91, 91, 0.13);
		}
		.sys-box-2 {
			margin-left: 130rpx;
			margin-right: 106rpx;
			padding: 22rpx;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #ffffff;
			background: var(--color-primary);
			border-radius: 16rpx 0px 16rpx 16rpx;
		}
	}
	.footer {
		height: 100rpx;
		padding: 26rpx 28rpx 22rpx 24rpx;
		.p0 {
			padding: 0 !important;
		}
	}
</style>
